<template>
  <div>
    <el-dialog
      :title=" isPreview ? '预览文章' : '观看视频'"
      :visible="visible"
      @update:visible="$emit('update:visible', $event)"
      width="800px"
      :before-close="handleClose">
      <div class="article-part" v-if="isPreview">
        <h2>{{ artInfo.title }}</h2>
        <p class="article-info">
          <span>{{ artInfo.createTime | timeTrans }}</span>
          <span>{{ authName }}</span>
          <span>
            <i class="el-icon-view"></i>
            {{artInfo.visits}}
          </span>
        </p>
        <div class="context-box">
          <el-alert
            :closable="false"
            type="info">
            <template #title>
              <div v-html="artInfo.articleBody"></div>
            </template>
          </el-alert>
        </div>
      </div>
      <div class="video-part" v-else>
        <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryArticle } from '@/api/interview'
export default {
  name: 'DetailDialog',
  props:{
    isPreview: Boolean,
    visible: Boolean,
    artId: {
      required: true
    },
    authName: String
  },
  data() {
    return {
      artInfo: {},
      video: {
        url: '',
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: false
      }
    }
  },
  computed: {
    $video(){
      return this.$refs.vueMiniPlayer.$video;
    }
  },
  methods: {
     handleClose(done) {
      return done()
    },
    async getDetail(id) {
      const res = await queryArticle(id)
      this.artInfo = res
      this.video.url = res.videoURL
    }
  },

  watch: {
    visible(val) {
      if(val && this.artId) {
        this.getDetail(this.artId)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.article-info{
  font-size: 12px;
  color: #888;
}
.context-box{
  width: 760px;
}

.article-info{
  padding-left: 8px;
  span{
    margin-right: 8px;
  }
}
</style>
